<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>电商技术一班点名系统</title>
	<script src="./jquery.min.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background:black;
		}
		.title{
			margin: 20px auto 30px auto;
			font-size: 40px;
			text-align: center;
			color: white;
		}
		.box{
			max-width:990px;
			margin:0 auto;
		}
		.box div{
			display: inline-block;
			width: 50px;
			height: 20px;
			margin: 0 20px 20px 0;
			padding: 10px 20px;
			background:orangered;
			font-size: 16px;
			line-height: 20px;
			text-align: center;
			color:white;
			cursor: pointer;
		}
		.start{
			display: block;
			width: 120px;
			height: 50px;
			font-size: 20px;
			line-height: 50px;
			text-align: center;
			margin: 20px auto 0;
			color:white;
			background:blueviolet;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1 class="title">电商技术一班点名系统</h1>
	<div class='box'>
	</div>
	<button class="start">开始点名</button>
</body>
</html>
<script type="text/javascript">
$(function() {
	// 内容不可选中
    $(document).on('selectstart', function() {
        return false
	})
	// 学生名单
    let students = [
		'王亚飞',
		'宋鑫明',
		'王堃',
		'牛草妮',
		'刘帅',
		'王申奥',
		'张雨荣',
		'麻启涛',
		'关晨旭',
		'李赛成',
		'周帅正',
		'孔维佳',
		'王路瑶',
		'杨梦洁',
		'郭莹雪',
		'娄欣雨',
		'化胜楠',
		'沈瑞格',
		'陈雨娟',
		'陈素莹',
		'邝金凤',
		'马梦瑶',
		'温卓倩',
		'鲁金晴',
		'杨佳慧',
		'郭富翔',
		'陈鹏宇',
		'张世舰',
		'郭浩',
		'邢智慧',
		'朱安琪',
		'吴志城',
		'董武鑫',
		'刘现挪',
		'马永豪',
		'张凡',
		'顾晨晨',
		'丁晴晴',
		'夏艺萌',
		'王泸森',
		'梁梦丽',
		'常雅婷',
		'曹可可',
		'刘露雨',
		'陈晨',
		'赵江珊',
		'李思涵',
	];
	// 得到box节点
	let box = $('.box');
	// 循环创建和插入div
	for (let i = 0; i < students.length; i++){
      box.append("<div>" + students[i] + "</div>")
	}
	    // 锁(实际为了点名状态中再点击按钮无反应)
	let flag = 0,
		// 定时器
		timer,
		// 等待次数(实际时间为100毫秒乘以n)
        n = 0
    $('.start').on('click', function() {
		// 如果处于未开始点名状态
        if (flag == 0) {
			// 锁置为锁死状态
            flag = 1;
            $(".but").html("点名中");
            timer = setInterval(function() {
                n++;
                $('.box div').each(function(k, v) {
                    $('.box div').eq(k).css({
                        'background': color(),
                        'color': color()
                    })
                })
                console.log(n)
                if (n >= 20) {
					// 清空计时器
					clearInterval(timer);
					// 开锁
                    flag = 0;
					$(".but").html("开始点名");
					// 重置初始等待值
                    n = 0;
                    $('.box div').css({
                        'background': 'orangered',
                        'color': 'white'
                    })
                    $('.box div').eq(name()).css({
                        'background': 'white',
                        'color': 'orangered'
                    })
                }
            }, 100)
        }
    })

    /*随机索引,随机给出点到的人*/
    function name() {
        return Math.floor(Math.random() * students.length)
    }
    /*随机的颜色封装函数*/
    function color() {
        var r = Math.floor(Math.random() * 256)
        var g = Math.floor(Math.random() * 256)
        var b = Math.floor(Math.random() * 256)
        return 'rgb(' + r + ',' + g + ',' + b + ')'
    }
})
</script>